<template>
	<view class="">
		<uni-forms ref="form" :label-width="labelWidth" :modelValue="formData" :rules="rules" v-bind="$attrs">
			<template v-for="items in config">
				<template v-if="items.isGroup">
					<slot :name="items.name" :data="items">
						<view class="">
							<uni-title type="h3" :title="items.groupName || '默认'"></uni-title>
						</view>
					</slot>
				</template>
				<template v-if="items.isGroup">
					<uni-forms-item v-for="item in items.config" :label="item.label" :name="item.name" :required="item.required"
						:key="item.name">
						<template v-if="item.isSlot">
							<slot :name="item.name" :data="item"></slot>
						</template>
						<template v-else>
							<uni-data-select v-on="item.event" v-if="item.component ==='uni-data-select'"
								v-bind="item.extra" v-model="formData[item.name]" />
							<uni-easyinput v-on="item.event" v-if="item.component === 'uni-easyinput'"
								v-bind="item.extra" v-model="formData[item.name]" />
							<uni-data-checkbox v-on="item.event" v-if="item.component === 'uni-data-checkbox'"
								v-bind="item.extra" v-model="formData[item.name]" />
							<uni-data-picker v-on="item.event" v-if="item.component === 'uni-data-picker'"
								v-bind="item.extra" v-model="formData[item.name]" />
							<uni-datetime-picker v-on="item.event" v-if="item.component === 'uni-datetime-picker'"
								v-bind="item.extra" v-model="formData[item.name]" />
							<uni-file-picker v-on="item.event" v-if="item.component === 'uni-file-picker'"
								v-bind="item.extra" v-model="formData[item.name]" />
							<uni-number-box v-if="item.component === 'uni-number-box'" v-bind="item.extra"
								v-model="formData[item.name]" />
						</template>
					</uni-forms-item>
				</template>
			</template>

		</uni-forms>
	</view>
</template>

<script>
	export default {
		name: "uni-group-uform",
		data() {
			return {
				// 表单数据
				// formData: {}
			}
		},
		model: {
			prop: 'formData',
			event: 'input'
		},
		props: {
			config: {
				type: Array
			},
			rules: {
				type: Object
			},
			formData: {
				type: Object
			},
			labelWidth: {
				type: Number,
				default: 75
			}
		},
		mounted(){
			for(const items of this.config){
				for(const item of items.config){
					//组件加载字典数据
					if(item.extra && item.extra.dict){
						if(item.extra){
							item.extra['localdata']=[];
						}
						this.getDicts(item.extra.dict).then(res=>{
							if(res.data&&res.data.length>0){
								res.data.map(item=>{
									item.extra['localdata'].push({
										text:item.dictLabel,
										value:item.dictValue
									});
								});
							}
						});
					}
					if(item.init){
						item.init();
					}
				}
			}
		},
		methods: {
			getForm() {
				return this.$refs.form
			}
		}
	}
</script>

<style lang="scss">

</style>